<template>
  <div>
  <div id="column" class="content-block content">
    <tab :line-width=2 active-color='#10c5b6' v-model="index">
      <tab-item class="vux-center" :selected="tabTitle === item" v-for="(item, index) in tabList" @click="tabTitle = item" :key="index">{{item}}</tab-item>
    </tab>
    <div  v-if="index==0">
      <scroller style="top: 44px"
        ref="columnAllScroller"
        :on-refresh="refreshColumnAll"
        :on-infinite="infiniteColumnAll">
      <van-card v-for="(item, index) in columnAllItems" :key="index"
        :title="(item.columnName)"
        :desc="(item.columnDesc)"
        num="2"
        :thumb="(item.columnLogo)">
      <div slot="footer">
        <router-link class='detail-btn' :to="{ path: 'specialColumn/columnContentList', query: { id: item.id }}">
          详情
        </router-link>
      </div>
      </van-card>
      </scroller>
    </div>
    <div  v-if="index == 1">
      <scroller style="top: 44px"
        delegate-id="myScroller"
        ref="columnMeScroller"
        :on-refresh="refreshColumnMe"
        :on-infinite="infiniteColumnMe">
      <van-card v-for="(item, index) in columnMeItems" :key="index"
        :title="(item.columnName)"
        :desc="(item.columnDesc)"
        num="2"
        :thumb="(item.columnLogo)">
      <div slot="footer">
        <router-link class='detail-btn' :to="{ path: 'specialColumn/columnContentList', query: { id: item.id }}">
          详情
        </router-link>
      </div>
      </van-card>
      </scroller>
    </div>
  </div>
  <flyray-tabbar></flyray-tabbar>
  </div>
</template>

<script>
import { Divider, Group, Tab, TabItem } from 'vux'
import Vue from 'vue'
import { Card } from 'vant'
Vue.component(Card.name, Card)
import 'vant/lib/vant-css/index.css'
import FlyrayTabbar from '@/components/FlyrayTabbar'
import { getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

const list = () => ['全部专栏', '我的订阅']

export default {
  components: {
    Divider,
    Group,
    Tab,
    TabItem,
    FlyrayTabbar
  },
  data () {
    return {
      tabList: list(),
      tabTitle: '全部专栏',
      index: 0,
      noDataAll: '',
      noDataMe: '',
      columnAllItems: [],
      columnMeItems: [],
      currentPageAll: '0',
      currentPageMe: '0',
      customerId: getCustomerId()
    }
  },
  watch: {
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted () {
    this.top = [1, 1]
    this.bottom = [10, 10]

    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'currentPage': '0',
        'pageSize': '10',
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post'
    }
    var self = this
    this.$ajax('api/cms/specialColumns/customer', config).then(function (response) {
      console.log(response)
      console.log(response.data.data.length)
      console.log(response.data.pagination.currentPage)
      self.currentPageMe = response.data.pagination.currentPage + 1
      var prodctLastItems = response.data.data
      self.columnMeItems = prodctLastItems
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    refreshColumnAll (done) {
      console.log('refreshColumnAll')
      var self = this
      this.noDataAll = true
      setTimeout(() => {
        self.columnAllItems = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': '0',
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPageAll = response.data.pagination.currentPage + 1
          var prodctLastItems = response.data.data
          self.columnAllItems = prodctLastItems
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteColumnAll (done) {
      console.log('infiniteColumnAll')
      var self = this
      if (this.noDataAll) {
        console.log(this.noDataAll)
        this.noDataAll = false
        self.$refs.columnAllScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerId,
            'currentPage': self.currentPageAll,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/list', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPageAll = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.columnAllScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.columnAllItems.push(data[i])
          }
          self.bottom[0] = self.bottom[0] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    refreshColumnMe (done) {
      console.log('refreshColumnMe')
      var self = this
      this.noDataMe = true
      setTimeout(() => {
        self.columnMeItems = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': '0',
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/customer', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPageMe = response.data.pagination.currentPage + 1
          var prodctLastItems = response.data.data
          self.columnMeItems = prodctLastItems
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteColumnMe (done) {
      console.log('infiniteColumnMe')
      var self = this
      if (this.noDataMe) {
        console.log(this.noDataMe)
        this.noDataMe = false
        self.$refs.columnMeScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPageMe,
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/specialColumns/customer', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPageAll = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noDataMe = '没有更多数据'
            self.$refs.columnMeScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.columnMeItems.push(data[i])
          }
          self.bottom[1] = self.bottom[1] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.custom-tabwrap .van-tab-active {
    color: #20a0ff;
  }
  .custom-tabwrap .van-tabs-nav-bar {
    background: #20a0ff;
  }
  .custom-pane {
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .detail-btn{
  color: #fff;
  background-color: #ff6769;
  display: inline-block;
  width: 50px;
  border-radius: 3px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  border: 1px solid #ff6769;
  text-align: center;
}
</style>
